<template>
  <div>
    <el-upload :data="uploadData" :headers="{ Authorization: this.$store.getters.token }" :http-request="chunkUpload" :before-upload="uploadBeforeHandler" :action="uploadUrl" :on-remove="beforeRemove" :on-success="successHandler">
      <el-button type="primary" size="small">上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import chunkUpload from '@/utils/file-upload.js'
// import { mapGetters } from 'vuex' 修改了

export default {
  name: 'FileUpload',
  // eslint-disable-next-line vue/order-in-components
  data() {
    return {
      uploadData: {
        // 这里面放额外携带的参数
        reportType: this.$store.getters.fileType,
        reportId: this.$route.query.id
      },
      // 文件上传的路径
      uploadUrl: process.env.VUE_APP_BASE_API + 'report/common/uploadFile', // 文件上传的路径
      chunkUpload: chunkUpload // 分片上传自定义方法，在头部引入了
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      console.log(this.$store.getters.fileType)
    },
    // onError(err, file, fileList) {
    //   // this.$store.getters.chunkUploadXhr.forEach((item) => {
    //   //   item.abort()
    //   // })
    //   this.$alert('文件上传失败，请重试', '错误', {
    //     confirmButtonText: '确定'
    //   })
    // },
    beforeRemove(file) {
      // 如果正在分片上传，则取消分片上传
      // if (file.percentage !== 100) {
      //   this.$store.getters.chunkUploadXhr.forEach((item) => {
      //     item.abort()
      //   })
      // }
    },

    successHandler(res, file, fileList) {
      this.$router.go(0)
    },

    uploadBeforeHandler(file) {
      const size = file.size
      if (size > 100800000) {
        this.$message.warning('单次上传文件的大小不能大于100MB')
        return false
      }

      return true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
